<template lang="pug">
  #comprehensive
    .page-header
      van-tabs(v-model="headerActive", swipeable, animated, sticky, @click="changeTab")
        van-tab(v-for="(item) in headerConfig", :title="item.name", :name="item.id", :key="item.id")
      .search-container
        v-search(@onSearch="onSearch")
      .sub-nav(v-show="showNav && navs.length > 1")
        van-tabs(type="card")
          van-tab(v-for="(item) in navs", :title="item.name", :key="item.id")
</template>
<script>
import VSearch from '@/components/search/Search'
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  components: {
    VSearch
  },
  data () {
    return {
      headerConfig: [],
      headerActive: '',
      columnId: '',
      showNav: false,
      navs: [],
      show: false,
      index: 0,
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    }
  },
  computed: {
    /**
     * vuex 一般写法
     */
    // 访问公共的state
    // count() {
    //   return this.$store.state.count;
    // },

    // 访问公共的getters
    // getCountNum() {
    //   return this.$store.getters.getCountNum;
    // },

    /**
     * vuex 进阶写法
     * 如果同名的，可以通过一个数组来表示
     */
    ...mapState(['count']),
    ...mapGetters(['getCountNum']),

    /**
     * vuex 进阶写法
     * 如果不同名的，通过一个对象来使用
     */
    ...mapState({
      counter: (state) => {
        return state.count
      },
      // 模块下的数据访问
      num: (state) => {
        return state.comprehensive.num
      },
      num2: (state) => {
        return state.comprehensive.num2
      }
    })

    /**
     * 模块下的state、getters 访问 ，一般写法
     */
    // num() {
    //   return this.$store.state.comprehensive.num;
    // },
    // num2() {
    //   return this.$store.state.comprehensive.num2;
    // }
  },
  created () {
    this.fetchJsTicket()
    this.fetchComprehensiveHeaderConfig()
    /**
       * this.$store.commit 只接受两个参数，第一个是mutation的名称，第二个是参数
       * 如果需要传多个参数，第二个参数必须要用Object包装起来
       * 命名空间后，模块化的mutation调用, 需要加上模块名
       */
    this.$store.commit('comprehensive/updateTest', {
      num: 11,
      num2: 22
    })
  },
  mounted () {
    // vuex严格模式下，不推荐直接通过this.$store.state来修改数据
    // 虽然能够修改成功，但是这是不规范的操作
    // this.$store.state.count = 100;
    // this.$store.state.count = 100;
  },
  methods: {
    /**
       * vuex mutations、actions 简略写法
       */
    ...mapActions([
      'comprehensive/fetchComprehensiveHeaderConfig',
      'comprehensive/fetchComprehensiveColumnId',
      'comprehensive/fetchBannerConfig',
      'comprehensive/fetchComprehensive'
    ]),

    /**
       * 获取综合列表头部配置（写法1）
       */
    fetchComprehensiveHeaderConfig () {
      const params = { pid: 'synthesize' }
      this['comprehensive/fetchComprehensiveHeaderConfig'](params).then((res) => {
        console.log(res)
        if (res.code === '0') {
          this.headerConfig = res.data
          this.headerActive = res.data[0].id
          this.fetchComprehensiveColumnId(res.data[0].id)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    /**
       * 获取综合列表头部配置（写法2）
       */
    // async fetchComprehensiveHeaderConfig() {
    //   let params = {
    //     pid: 'synthesize'
    //   };
    //   await this.$store.dispatch('comprehensive/fetchComprehensiveHeaderConfig', params).then((res) => {
    //     console.log(res);
    //     if(res.code === "0"){
    //       this.headerConfig = res.data;
    //       this.headerActive = res.data[0].id;
    //     }
    //   }).catch((error) => {
    //     console.log(error);
    //   })
    // },

    /**
       * 获取综合列表某一项ID
       */
    fetchComprehensiveColumnId (id) {
      const params = {
        pid: id
      }
      this['comprehensive/fetchComprehensiveColumnId'](params).then((res) => {
        console.log(res)
        if (res.code === '0') {
          const data = res.data
          if (data && data.length > 1) {
            this.showNav = true
            this.navs = data
          } else {
            this.showNav = false
            this.navs = []
          }
          this.columnId = res.data[0].id
          this.fetchBannerConfig(res.data[0].id)
          this.fetchComprehensive(res.data[0].id)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    /**
       * 获取轮播图配置
       */
    fetchBannerConfig (id) {
      const params = {
        columnId: id
      }
      this['comprehensive/fetchBannerConfig'](params).then((res) => {
        console.log(res)
        if (res.data.code === '0') {}
      }).catch((error) => {
        console.log(error)
      })
    },

    /**
       * 获取综合列表
       */
    fetchComprehensive (id) {
      const params = {
        columnId: id,
        page: 1,
        pageSize: 10
      }
      this['comprehensive/fetchComprehensive'](params).then((res) => {
        console.log(res)
        // if (res.code === '0') {}
      }).catch((error) => {
        console.log(error)
      })
    },

    /**
       *
       */
    async fetchJsTicket () {
      await this.$store.dispatch('fetchJsTicket', {}).then((res) => {
        console.log(res)
      }).catch((error) => {
        console.log(error)
      })
    },
    /**
       * 后退
       */
    goBack () {
      this.$router.go(-1)
    },
    /**
       * 搜索跳转
       */
    onSearch () {
      alert('跳转搜索页面')
    },
    /**
       * 点击进入详情页
       *
       */
    goDetailPage () {
      this.$router.push(`/comprehensive/detail/${123}`)
    },
    /**
       * 切换tab
       */
    changeTab (name, title) {
      console.log(name)
      console.log(title)
      this.fetchComprehensiveColumnId(name)
    }
  }
}
</script>
<style lang="sass">
  .page-header
    position: absolute
    top: 0
    left: 0
    right: 0
  .van-tabs__content
    position: absolute
    top: 150px
    left: 0
    right: 0
  .search-container
    padding: 12px 20px
  .sub-nav
    .van-tabs__nav--card
      border: none
    .van-tab
      background: #F4F4F4
      border: none
      margin-right: 10px
</style>
